/**
 * v-trim 自动去除输入框前后空格
 * 在输入框失去焦点时自动 trim 值
 */
export default {
  mounted(el) {
    // 获取实际的 input 元素
    const getInputElement = (element) => {
      if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
        return element
      }
      // Element Plus 的 el-input 组件内部结构
      const input = element.querySelector('input') || element.querySelector('textarea')
      return input
    }

    const input = getInputElement(el)
    if (!input) return

    // 处理 blur 事件，自动 trim
    const handleBlur = (e) => {
      const target = e.target
      if (typeof target.value === 'string') {
        const trimmed = target.value.trim()
        if (target.value !== trimmed) {
          target.value = trimmed
          // 触发 input 事件以更新 v-model（Vue 3 和 Element Plus）
          const inputEvent = new Event('input', { bubbles: true, cancelable: true })
          target.dispatchEvent(inputEvent)
          // 也触发 change 事件以确保兼容性
          const changeEvent = new Event('change', { bubbles: true, cancelable: true })
          target.dispatchEvent(changeEvent)
        }
      }
    }

    input.addEventListener('blur', handleBlur)
    
    // 保存 input 元素和清理函数
    el._trimInput = input
    el._trimHandler = handleBlur
  },
  unmounted(el) {
    // 清理事件监听
    if (el._trimHandler && el._trimInput) {
      el._trimInput.removeEventListener('blur', el._trimHandler)
      delete el._trimInput
      delete el._trimHandler
    }
  }
}

